<!--
 * @Descripttion: 出手鸭小程序
 * @version:1.0.1 
 * @Author: HHL
 * @Date: 2023-10-10 14:29:52
 * @LastEditTime: 2025-09-17 20:03:49
 * @LastEditors: sueRimn
-->

<template>
  <view class='coupon d-flex align-items-center justify-content-between'>
    <view class="title d-flex align-items-center" v-if="selectCoupon.bonusValue>0">
	  <view class="value"><text class="yuan">¥</text>{{ selectCoupon.bonusValue }}</view>
	  <view class="coupon-type">
		<view class="text">{{ selectCoupon.bonusName }}</view>
		<view class="count-down">
			<text>有效期</text>
			<view class="time"><text>{{countdown.hours}}</text><text>:</text><text>{{countdown.minutes}}</text><text>:</text><text>{{countdown.seconds}}</text></view>
		</view>
	  </view>
    </view>
	<view class="not-available d-flex align-items-center justify-content-between" v-else @click="goCouponCenter">
		<text>优惠券</text>
		<view class="text">
			<text>暂无可用券</text>
		    <image src="https://image.chushouya.com/assets/images/product/icon_click@2x.png" mode="aspectFill" class="right-icon"></image>
		</view>
	</view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import dayjs from 'dayjs'

export default {
  props: {
    selectCoupon: { type: Object, default: { bonusValue: 0 } },
    couponList: { type: Array, default: [] }
  },
  data() {
    return {

    }
  },

  computed: {
	...mapGetters([
		'recoveryMode','countdown'
	]),
    // 预计下周价格
    returnNextWeekFallPrice() {
      // const price = Decimal.sub(this.evaluate.evaluatePrice || 0, this.evaluate.nextWeekFallPrice || 0)
      // return price.toString()
    },

    returnDaysRemaining() {
      if (this.selectCoupon.endTime) {
        const now = dayjs()
        const end = dayjs(this.selectCoupon.endTime)
        return end.diff(now, 'day')
      }
      return ''
    },

  },

  methods: {
	  goCouponCenter(){
		  
	  }
  },
}
</script>

<style lang="scss" scoped>
.coupon {
  background: url('https://image.chushouya.com/assets/images/product/yhq_bg.png') no-repeat center;
  background-size: 100% 100%;
  position: relative;
  margin: 20rpx 0;

  .title {
	  padding: 24rpx 32rpx;
	  .coupon-type {
		  font-family: PingFangSC, PingFang SC;
		  font-weight: 400;
		  color: #FF4F3E;
		  .text {
			  font-family: PingFangSC, PingFang SC;
			  font-weight: 500;
			  font-size: 28rpx;
			  color: #FF4F3E;
		  }
		  .count-down {
			  display: flex;
			  justify-content: flex-start;
			  align-items: center;
			  font-size: 22rpx;
			  opacity: 0.7;
			  view {
				  margin-left: 8rpx;
			  }
		  }
	  }
  }
  
  .value{
    font-size: 52rpx;
    color: #FF4F3E;
	margin-right: 62rpx;
	width: 120rpx;
    .yuan{
      font-size: 40rpx;
	  margin-right: 2rpx;
    }
  }

  .btn {
    width: 152rpx;
    height: 60rpx;
    line-height: 60rpx;
    background: var(--hui-button-bg);
    font-size: var(--hui-font-size-26);
    border-radius: 30rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: var(--hui-color-white);
    text-align: center;
  }
  
  .not-available {
	  width: 100%;
	  height: 100rpx;
	  background: #FFFFFF;
	  border-radius: 24rpx;
	  padding: 0 32rpx 0 22rpx;
	  font-family: PingFangSC, PingFang SC;
	  font-weight: 400;
	  font-size: 28rpx;
	  color: #333333;
	  .right-icon {
	  	width: 32rpx;
	  	height: 32rpx;
	  }
	  .text {
		  vertical-align: middle;
		  font-family: PingFangSC, PingFang SC;
		  font-weight: 400;
		  font-size: 28rpx;
		  color: #999999;
	  }
	  image {
		  vertical-align: middle;
	  }
  }
}
</style>